<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="custom" tagdir="/WEB-INF/tags" %>
<html>
<head>
    <link type="text/css" href="${contextPath}/resources/css/jquery-ui-1.10.3.css">
    <title>员工微信号绑定</title>
</head>

<body>
<div class="pageheader">
    <h2>员工微信号绑定</h2>
</div>
<div class="contentpanel">
    <form:form method="post" commandName="formDto" cssClass="form-horizontal form-bordered">
        <div class="row">
            <div class="col-md-6">

                <div id="form1" class="form-horizontal">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">员工信息</h4>
                        </div>
                        <div class="panel-body panel-body-nopadding">

                            <div class="form-group">
                                <label class="col-sm-2 control-label">名称:</label>

                                <div class="col-sm-10">
                                    <p class="form-control-static">${formDto.employeeDto.name}</p>
                                    <form:hidden path="employeeDto.name"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">性别:</label>

                                <div class="col-sm-10">
                                    <p class="form-control-static">
                                        <c:if test="${formDto.employeeDto.gender== '1'}">男</c:if>
                                        <c:if test="${formDto.employeeDto.gender== '2'}">女</c:if>
                                        <c:if test="${formDto.employeeDto.gender== '0'}">未知</c:if>
                                    </p>
                                    <form:hidden path="employeeDto.gender"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">年龄:</label>

                                <div class="col-sm-10">
                                    <p class="form-control-static">
                                            ${formDto.employeeDto.age}
                                    </p>
                                    <form:hidden path="employeeDto.age"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">电话:</label>

                                <div class="col-sm-10">
                                    <p class="form-control-static">
                                            ${formDto.employeeDto.phone}
                                    </p>
                                    <form:hidden path="employeeDto.phone"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">部门:</label>

                                <div class="col-sm-10">
                                    <p class="form-control-static">
                                            ${formDto.employeeDto.deptDto.name}
                                    </p>
                                    <form:hidden path="employeeDto.deptDto.name"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">分派人员:</label>

                                <div class="col-sm-10">
                                    <p class="form-control-static">
                                            ${formDto.employeeDto.leader? "是":"否"}
                                    </p>
                                    <form:hidden path="employeeDto.leader"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">社区监督员:</label>

                                <div class="col-sm-10">
                                    <p class="form-control-static">
                                            ${formDto.employeeDto.inspector? "是":"否"}
                                    </p>
                                    <form:hidden path="employeeDto.inspector"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- panel-default -->
                </div>

            </div>
            <!-- col-md-6 -->

            <div class="col-md-6">

                <div id="form2" class="form-horizontal form-bordered">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">微信信息</h4>
                        </div>
                        <div class="panel-body panel-body-nopadding">
                            <form:hidden path="memberUuid" id="memberUuid"/>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">昵称:</label>

                                <div class="col-sm-9">
                                    <input type="text" name="name" id="search-input" class="form-control"
                                           autocomplete="off" placeholder="请输入昵称搜索"/>
                                    <form:errors path="memberUuid" cssclass="error text-danger"/>
                                </div>
                            </div>

                            <div class="form-group MemberInfo">
                                <label class="col-sm-2 control-label">性别:</label>

                                <div class="col-sm-9">
                                    <p class="form-control-static Gender">

                                    </p>
                                </div>
                            </div>
                            <div class="form-group MemberInfo">
                                <label class="col-sm-2 control-label">头像:</label>

                                <div class="col-sm-9">
                                    <img src="" alt="头像" class="img-rounded" style="width: 30px;height: 30px;"/>
                                </div>
                            </div>
                            <div class="form-group MemberInfo">
                                <label class="col-sm-2 control-label">地址:</label>

                                <div class="col-sm-9">
                                    <p class="form-control-static Address">

                                    </p>
                                </div>
                            </div>


                            <div class="form-group">
                                <label class="col-sm-2 control-label"></label>

                                <div class="col-sm-9">
                                    <button class="btn btn-primary">绑定</button>
                                    <a href="javascript:window.history.go(-1);" class="btn btn-default">取消</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- panel-default -->
                </div>

            </div>
            <!-- col-md-6 -->

        </div>
    </form:form>
</div>
<style type="text/css">
    .MemberInfo {
        display: none;
    }
</style>
<script type="text/javascript">
    $("input#search-input").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "load_member_json",
                dataType: "json",
                data: {
                    key: request.term
                },
                success: function (data) {
                    response($.map(data.list, function (item) {
                        console.log(data);
                        return {
                            label: item.nickname,
                            value: item.nickname,
                            uuid: item.uuid,
                            openid: item.openid,
                            nickname: item.nickname,
                            gender: item.sex,
                            headimgurl: item.headimgurl,
                            address: item.address
                        }
                    }));
                }
            });
        },
        minLength: 1,
        select: function (event, ui) {
            if (ui.item) {
                $("input#memberUuid").val(ui.item.uuid);
                $(".Gender").html(ui.item.sex);
                var gender = ui.item.gender;
                if (gender == 0 || gender == "0") {
                    $(".Gender").html("未知");
                }
                if (gender == 1 || gender == "1") {
                    $(".Gender").html("男性");
                }
                if (gender == 2 || gender == "2") {
                    $(".Gender").html("女性");
                }
                $(".img-rounded").attr("src", ui.item.headimgurl);
                $(".Address").html(ui.item.address);
                $(".MemberInfo").show();
            }
        }
    });
</script>
</body>
</html>
